<!DOCTYPE html>

<head th:include="fragments/head::header"/>
<body class="no-skin">
    <div th:include="fragments/navbar::navbar"></div>
    <div class="main-container ace-save-state" id="main-container">
        <div th:include="fragments/left::left" id="sidebar" class="sidebar  responsive ace-save-state"></div>
        <div class="main-content">
            <div class="main-content-inner">
                <div class="breadcrumbs ace-save-state" id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li><i class="icon-home home-icon"></i> <a href="/main">首页</a></li>
                        <li class="active">卡牌列表</li>
                    </ul>
                </div>
                <div class="page-content">
                    <div class="row">
                        <div class="row">
                            <div class="col-xs-12">
                                <h3 class="header smaller lighter blue">卡牌列表</h3>
                                <div class="table-header">
                                    <form class="form-inline">
                                        <div class="form-group">
                                            <label>卡牌名称：</label>
                                            <input type="text" id="input_cardName" class="form-control input-sm" placeholder="" style="width:100px;"/>
                                            <label style="margin-left: 20px;">种类：</label>
                                            <select id="select_kind" class="form-control input-sm" style="width:100px;">
                                                <option value="-1">-请选择-</option>
                                                <option th:each="item: ${cardKindList}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="margin-left: 20px;">
                                            <label>职业：</label>
                                            <select id="select_occupation" class="form-control input-sm" style="width:100px;">
                                                <option value="-1">-请选择-</option>
                                                <option th:each="item: ${cardOccupationList}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                            <label style="margin-left: 20px;">稀有度：</label>
                                            <select id="select_rarity" class="form-control input-sm" style="width:100px;">
                                                <option value="-1">-请选择-</option>
                                                <option th:each="item: ${cardRarityList}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <div class="form-group" style="margin-left: 20px;">
                                            <label>集合：</label>
                                            <select id="select_set" class="form-control input-sm" style="width:100px;">
                                                <option value="-1">-请选择-</option>
                                                <option th:each="item: ${cardSetList}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                            <label>类型：</label>
                                            <select id="select_type" class="form-control input-sm" style="width:100px;">
                                                <option value="-1">-请选择-</option>
                                                <option th:each="item: ${cardTypeList}" th:value="${item.id}" th:text="${item.name}"></option>
                                            </select>
                                        </div>
                                        <button type="button" id="query" style="margin-left: 15px;" class="btn btn-success ">查询</button>
                                        <button type="reset" class="btn btn-warning">清空</button>
                                        <a data-toggle="modal" class="btn btn-info" href="javascript:void(0);" id="a_addCard">添加卡牌</a>
                                        <br/>
                                        <div class="form-group" style="">
                                            <span id="span_health" style="width: 550px;margin: 15px;margin-left: 10px;" class="ui-slider-green ui-slider-small col-sm-10">-1</span>
                                            <span>生命：</span>
                                            <span id="span_health_value">-1</span>
                                        </div>

                                        <br/>
                                        <div class="form-group" style="margin-bottom: 8px;">
                                            <input id="input_cost" type="text" style="margin-top: 3px;"/>
                                            <span style="margin-left: 10px;">费用：</span>
                                            <span id="span_cost">-1</span>
                                        </div>
                                    </form>
                                </div>
                                <div>
                                    <table id="dynamic-table" class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th class="center">
                                                <label class="pos-rel">
                                                    <input type="checkbox" class="ace" />
                                                    <span class="lbl"></span>
                                                </label>
                                            </th>
                                            <th class="hide">id</th>
                                            <th>名称</th>
                                            <th>类型</th>
                                            <th class="hidden-480">职业</th>
                                            <th>
                                                <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
                                                稀有度
                                            </th>
                                            <th class="hidden-480">种类</th>
                                            <th class="hidden-480">费用</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div th:include="fragments/bottom::bottom"></div>
                </div>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/assets/js/jquery.validate.min.js}"></script>
    <script th:src="@{/assets/js/jquery.validate.zh-CN.js}"></script>
    <script th:src="@{/assets/js/jquery.dataTables.min.js}" type="text/javascript"></script>
    <script th:src="@{/assets/js/jquery.dataTables.bootstrap.js}" type="text/javascript"></script>
    <script th:src="@{/assets/js/dataTables.buttons.min.js}"></script>
    <!--<script th:src="@{/assets/js/dataTables.select.min.js}"></script>-->
    <script th:src="@{/assets/js/temp.js}" charset="UTF-8"></script>
    <script th:src="@{/assets/js/jquery-ui.custom.min.js}" charset="UTF-8"></script>
    <script th:src="@{/assets/js/spinbox.min.js}" charset="UTF-8"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            var pageHelper = (function () {
                this.oTable1;
                return {
                    init: function () {
                        this.getQueryData();
                        this.handelQueryData();
                        this.render();
                        this.addEvent();
                    },
                    getQueryData: function () {

                    },
                    handelQueryData: function () {

                    },
                    render: function () {
                        var _self = this;
                        $("#span_health").css({ 'float':'left'}).empty().slider({
                                value: -1,
                                range: "min",
                                min:-1,
                                max:10,
                                animate: true,
                                slide: function( event, ui ) {
                                    $("#span_health_value").text(ui.value);
                                }
                            });
                        $("#input_cost").ace_spinner({value:-1,min:-1,max:10,step:1, on_sides: true, icon_up:'ace-icon fa fa-plus bigger-110', icon_down:'ace-icon fa fa-minus bigger-110', btn_up_class:'btn-success' , btn_down_class:'btn-danger'})
                        .closest('.ace-spinner')
                        .on('changed.fu.spinbox', function(){
                            $("#span_cost").text($("#input_cost").val());
                        });
                        _self.oTable1 = $('#dynamic-table').dataTable({
                            "bFilter" : false,// 是否使用搜索
                            "bProcessing" : true,// 载入数据时，是否显示‘进度’提示
                            "bDeferRender" : true,// 延期渲染，可以有个速度的提升
                            "sPaginationType" : "bs_normal",//分页样式 "full_numbers", //详细分页组，可以支持直接跳转到某页
                            "bRetrieve" : true,// 是否调用后台
                            "bServerSide" : true,// 是否以后台分页
                            "aLengthMenu" : [10, 20, 30], // 更改显示记录数选项
                            "iDisplayLength" : 10, // 默认显示的记录数
                            "bAutoWidth" : false, //是否自适应宽度
                            "sAjaxSource" : "/card/list/query",//请求路径
                            "bSort" : true, // 是否启动各个字段的排序功能
                            "select": {
                                style: 'multi'
                            },
                            "fnServerData" : function(sSource, aoData, fnCallback) {
                                var paramName = $.trim($("#input_cardName").val());
                                var kind = $("#select_kind option:selected").val();
                                var occupation = $("#select_occupation option:selected").val();
                                var rarity = $("#select_rarity option:selected").val();
                                var paramSet = $("#select_set option:selected").val();
                                var type = $("#select_type option:selected").val();
                                var health = $("#span_health_value").text();
                                var cost = $("#span_cost").text();
                                if(paramName != null && paramName != '')
                                    aoData.push({"name":"paramName","value":paramName});
                                if(kind != null && kind != '-1')
                                    aoData.push({"name":"kind","value":kind});
                                if(occupation != null && occupation != '-1')
                                    aoData.push({"name":"occupation","value":occupation});
                                if(rarity != null && rarity != '-1')
                                    aoData.push({"name":"rarity","value":rarity});
                                if(paramSet != null && paramSet != '-1')
                                    aoData.push({"name":"paramSet","value":paramSet});
                                if(type != null && type != '-1')
                                    aoData.push({"name":"type","value":type});
                                if(health != null && health != '-1')
                                    aoData.push({"name":"health","value":health});
                                if(cost != null && cost != '-1')
                                    aoData.push({"name":"cost","value":cost});
                                $.ajax({
                                    "dataType" : 'json',
                                    "type" : "GET",
                                    "url" : sSource,
                                    "data" : aoData,
                                    "success" : fnCallback
                                });
                            },
                            "aaSorting" : [ [ 7, "asc" ] ],// 默认的排序方式,th和后端数据对应
                            "aoColumns" : [
                                {"sClass" : "center", "bSortable" : false, "mData" : function (data) {
                                        var html = '<label class="pos-rel"><input type="checkbox" class="ace"><span class="lbl"></span></label>';
                                        return html;
                                    }
                                },
                                {"sClass": "center", "bVisible": false, "bSearchable": false, "mData": "id"},
                                {"sClass": "center", "bSortable": false,"bSearchable":true , "mData":  function(data) {
                                        return "<a target='_blank' href='/card/detail/" + data.id + "'>" + data.paramName + "</a>";
                                    }
                                },
                                {"sClass": "center", "bSortable": false, "bSearchable":false ,"mData": "typeDisplay"},
                                {"sClass": "center", "bSortable": false, "bSearchable":false ,"mData": "occupationDisplay"},
                                {"sClass": "center", "bSortable": false, "bSearchable":false ,"mData": "rarityDisplay"},
                                {"sClass": "center", "bSortable": false, "bSearchable":false ,"mData": "kindDisplay"},
                                {"sClass": "center", "bSortable": true,"bSearchable":false ,"mData": "Cost"},
                                // {"sClass": "center", "bSortable": false, "mData": "sendDate",
                                //     "mRender" : function(data, type, full, meta) {
                                //         if (data != null) {
                                //             return moment(data).format("YYYY-MM-DD");
                                //         } else {
                                //             return "";
                                //         }
                                //     }
                                // },
                                {"sClass" : "center", "bSortable" : false, "mData" : function (data) {
                                        var styleDiv='<div class="hidden-sm hidden-xs action-buttons">';
                                        var detailHtml = '';
                                        //if($("#input_hasPermission_visaApply_detail").val() == "1"){
                                            detailHtml = "<a class='blue' href='/card/detail/" + data.id + "'><i class='ace-icon fa fa-search-plus bigger-130'></i></a>";
                                        //}
                                        var editHtml = '';
                                        //if($("#input_hasPermission_visaApply_edit").val() == "1" && $("#input_hasPermission_visaResult_edit").val() == "1") {
                                            //if($("#input_canEdit").val() == "true" || data.operatorNo == $("#oaid").val())  {
                                            editHtml = "<a class='green' href='/card/edit/" + data.id + "'><i class='ace-icon fa fa-pencil bigger-130'></i></a>";
                                            //}
                                        //}
                                        var deleteHtml = '';
                                        //if($("#input_hasPermission_visaApply_delete").val() == "1" && $("#input_hasPermission_visaResult_delete").val() == "1") {
                                            deleteHtml = "<a class='red' href='javascript:void(0);'><i class='ace-icon fa fa-trash-o bigger-130'></i></a>";
                                        //}
                                        return styleDiv + detailHtml + editHtml + deleteHtml + '</div>';
                                    }
                                }
                            ],
                            "oLanguage" : {
                                "sLengthMenu" : "每页 _MENU_条 ",
                                "sZeroRecords" : "对不起，查询不到任何相关数据",
                                "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录 ",
                                "sInfoEmpty" : "显示 0 到 0 条，共 0 条记录",
                                "sInfoFiltered" : "数据表中共为 _MAX_ 条记录)",
                                "sProcessing" : "正在加载中...",
                                "sSearch" : "搜索",
                                "sUrl" : "",
                                "oPaginate" : {
                                    "sFirst" : "第一页",
                                    "sPrevious" : " 上一页 ",
                                    "sNext" : " 下一页 ",
                                    "sLast" : " 最后一页 "
                                }
                            }
                            //多语言配置
                        });
                    },
                    addEvent: function () {
                        var _self = this;
                        $("#query").click(function () {
                            _self.oTable1.fnDraw();
                        });
                        $("#a_addCard").click(function () {
                            window.location.href = "/card/addPage";
                        });
                    }
                }
            })();
            pageHelper.init();
        });
    </script>
</body>
</html>